From: Florian Müllner <fmuellner@gnome.org>
Date: Fri, 13 Nov 2020 01:36:08 +0000 (+0100)
Subject: dbusServices/extensions: Stop stacking frames
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~616^2^2~603
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=99a796e426ed81e16faf7d1651ee7b859615df84;p=gnome-shell.git

dbusServices/extensions: Stop stacking frames

We currently use separate frames for the details expander and the
expanded details. That layout works as long as frames are boxy (as
in the default GTK3 style), but breaks down with rounded corners
(as in the default GTK4 style).

In order to work with either style, adapt the layout to use a single
surrounding frame and appropriate borders as separator.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1495>
---

diff --git a/js/dbusServices/extensions/css/application.css b/js/dbusServices/extensions/css/application.css
index 1acbf36c8..fb7c47556 100644
--- a/js/dbusServices/extensions/css/application.css
+++ b/js/dbusServices/extensions/css/application.css
@@ -1,4 +1,4 @@
-.expander-frame > * { border-top-width: 0; }
+.expanded { border: 0 solid @borders; border-bottom-width: 1px; }
 .expander-toolbar {
   border: 0 solid @borders;
   border-top-width: 1px;
diff --git a/js/dbusServices/extensions/extensionsService.js b/js/dbusServices/extensions/extensionsService.js
index 456ca6ba7..34107cdb3 100644
--- a/js/dbusServices/extensions/extensionsService.js
+++ b/js/dbusServices/extensions/extensionsService.js
@@ -192,7 +192,10 @@ var ExtensionPrefsDialog = GObject.registerClass({
             this._expanderArrow.icon_name = this._revealer.reveal_child
                 ? 'pan-down-symbolic'
                 : 'pan-end-symbolic';
+            this._syncExpandedStyle();
         });
+        this._revealer.connect('notify::child-revealed',
+            () => this._syncExpandedStyle());
 
         try {
             ExtensionUtils.installImporter(extension);
@@ -211,6 +214,13 @@ var ExtensionPrefsDialog = GObject.registerClass({
         }
     }
 
+    _syncExpandedStyle() {
+        if (this._revealer.reveal_child)
+            this._expander.get_style_context().add_class('expanded');
+        else if (!this._revealer.child_revealed)
+            this._expander.get_style_context().remove_class('expanded');
+    }
+
     _setError(exc) {
         this._errorView.buffer.text = `${exc}\n\nStack trace:\n`;
         // Indent stack trace.
diff --git a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
index 020bc4462..9e51e3c58 100644
--- a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
+++ b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
@@ -53,16 +53,16 @@
                       </object>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkFrame">
                         <property name="visible">True</property>
-                        <property name="orientation">vertical</property>
                         <property name="margin-top">12</property>
                         <child>
-                          <object class="GtkFrame" id="expander">
+                          <object class="GtkBox">
                             <property name="visible">True</property>
                             <property name="hexpand">True</property>
+                            <property name="orientation">vertical</property>
                             <child>
-                              <object class="GtkEventBox">
+                              <object class="GtkEventBox" id="expander">
                                 <property name="visible">True</property>
                                 <child>
                                   <object class="GtkBox">
@@ -88,17 +88,9 @@
                                 </child>
                               </object>
                             </child>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkRevealer" id="revealer">
-                            <property name="visible">True</property>
                             <child>
-                              <object class="GtkFrame">
+                              <object class="GtkRevealer" id="revealer">
                                 <property name="visible">True</property>
-                                <style>
-                                  <class name="expander-frame"/>
-                                </style>
                                 <child>
                                   <object class="GtkBox">
                                     <property name="visible">True</property>